<template>
  <div style="background: black">
    <canvas id="bg" width="2000" height="2000"/>
    <div class="cockpitMainBox" >
      <cockpit-detail v-show="showDetail"
                      @everydaySales="openDetail('everydaySales')"
                      :visible.sync="showDetail"
                      :data="detailData"
      />
      <div class="title">
        <div class="titleText flex a-item">应收看板
        </div>
      </div>
      <div class="tableBox report01">
        <div class="leftBor" />
        <div class="rightBor" />
        <div class="reportTitle">
          月度应收
        </div>
        <div class="xial"/>
        <echarts-template :width="containSizes.report01.width"  :height="containSizes.report01.height" :option="report01Option" />

      </div>
      <div class="tableBox report02" >
        <div class="leftBor" />
        <div class="rightBor" />
        <div class="reportTitle">
          年度同比
        </div>
        <div class="xial"/>
        <div class="scroll">
          <echarts-template :width="containSizes.report02.width"  :height="containSizes.report02.height" :option="report02Option" />
        </div>
      </div>
      <div class="tableBox report03" >
<!--        <z-select-->
<!--          url="/api/cockpit/cockpitSaleBoard/dropDownList"-->
<!--          :popperAppendToBody="false"-->
<!--          class="type  psCustomer"-->
<!--          size="999"-->
<!--          :params="{-->
<!--            dropDownType:'company',-->
<!--          }"-->
<!--          labelKey="dropDownName"-->
<!--          valueKey="dropDownName"-->
<!--          @change="$event=>setQuery('curReceive',$event)"-->
<!--        />-->
        <div class="leftBor" />
        <div class="rightBor" />
        <div class="reportTitle">
          应收
        </div>
        <div class="xial"/>
        <div class="scroll">
          <echarts-template :width="containSizes.report03.width"  :height="containSizes.report03.height" :option="report03Option" />
        </div>
      </div>
      <div class="tableBox report04" >
<!--        <z-select-->
<!--          url="/api/cockpit/cockpitSaleBoard/dropDownList"-->
<!--          :popperAppendToBody="false"-->
<!--          class="type psCustomer"-->
<!--          size="999"-->
<!--          :params="{-->
<!--            dropDownType:'company',-->
<!--          }"-->
<!--          labelKey="dropDownName"-->
<!--          valueKey="dropDownName"-->
<!--          @change="$event=>setQuery('monthlyYoyReceive',$event)"-->
<!--        />-->
        <div class="leftBor" />
        <div class="rightBor" />
        <div class="reportTitle">
          月度同比
        </div>
        <div class="xial"/>
        <div class="scroll">
          <echarts-template :width="containSizes.report04.width"  :height="containSizes.report04.height" :option="report04Option" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echartsTemplate from '@/components/echartsTemplate/echartsTemplate'
import { debounce } from '../../../utils/auth'
import cockpitDetail from './cockpitDetail'
import {
  curReceive,
  curStock,
  dropDownList,
  getCockpit, monthlyReceive,
  monthlySale, monthlyStock,
  monthlySum,
  monthlyYoy, monthlyYoyReceive, monthlyYoyStock,
  yearlySum,
  yearlyYoy, yearlyYoyReceive, yearlyYoyStock
} from '../../../api/erp/cockpit'

export default {
  name: 'financeCockpit',
  components:{echartsTemplate, cockpitDetail},
  data(){
    return{
      status:0,
      query:{
        monthlyReceive:'',
        yearlyYoyReceive:'',
        curReceive:'',
        monthlyYoyReceive:'',
      },
      dropDownType:'goodsType',
      dropDownHeight:0,
      cockpitType:{
        sale:'销售', profit:'毛利'
      },
      report01Option:{},
      report02Option:{},
      report03Option:{},
      report04Option:{},
      showDetail:false,
      //明细数据
      detailData:{
        title:'公司直营数据',
        props:[{prop:'companyName',label:'配送中心'},{prop:'orderCount',label: '销售单数'},{prop:'acceptBoxCount',label:'销售箱数'},{prop:'acceptTaxAmount',label:'销售金额'}],
        data:[]
      },
      detailProps:{
        monthlySales:{

        }
      },
      //解决echarts无法跟随屏幕变化更新高度
      /**
       * width 容器宽度
       * height 容器高度
       * widthProportion: 容器占父级元素宽度百分比‘
       * heightProportion: 容器占父级元素高度百分比
       * */
      containSizes:{
        report01:{width:'1000px',height:'200px',widthProportion:1,heightProportion:0.80},
        report02:{width:'1000px',height:'200px',widthProportion:2.5,heightProportion:0.85},
        report03:{width:'1000px',height:'200px',widthProportion:1,heightProportion:0.85},
        report04:{width:'1000px',height:'200px',widthProportion:2.5,heightProportion:0.85},
      },
      app:null,
      bg:null,
      ctx:null,
      bgConfig:{
        columnsCount:0,
        charIndex:[],
      },
      ctxfontSize:0,

      customerList:[],
      day:0,
      year:0,
      month:0,
      goodsBrandList:[],
      goodsTypeList:[]
    }
  },
  created() {
    const date = new Date()
    this.year = date.getFullYear()
    this.day = date.getDate()
    this.month = date.getMonth()+1


    dropDownList({dropDownType:'goodsType'}).then(res=>{
      this.goodsTypeList = res.content
      for(let i of this.goodsTypeList){
        i.color = `rgb(${ 255*Math.random()>>0},${ 255*Math.random()>>0},${ 255*Math.random()>>0})`
      }
    })
    dropDownList({dropDownType:'goodsBrand'}).then(res=>{
      this.goodsBrandList = res.content
    })
    setTimeout(()=>{
      this.report01Option= {
        grid: {
          top:30,
          left:80,
          bottom:50
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: true,
          bottom:'0',
          left:'10%',
          data:[
          ]
        },
        xAxis: {
          type: 'category',
          data: [],
          boundaryGap: false,
          axisLabel: {
            show: true,
            interval: 0,//代表显示所有x轴标签显示
            textStyle: {
              color: 'rgba(255,255,255,1)'
            },
          }
        },

        yAxis: {
          type: 'value',
          splitLine: {
            show: true,    // 是否显示分隔线。默认数值轴显示，类目轴不显示
            interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
            lineStyle: {
              color: 'rgba(255,255,255,.2)'
            },
            width: 3,    // 分隔线线宽
            type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
          },
          axisLabel: {
            show: true,
            interval: 0,//代表显示所有x轴标签显示
            textStyle: {
              color: 'rgba(255,255,255,1)'
            },
          }
        },
        series: []
      };
    })
    setTimeout(()=>{this.report02Option ={
      animation: true,
      color: ["#3398DB"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      legend: {
        show: true,
        itemHeight: 3,
        bottom:'0%',
        left:'10%',
        data:[
          {
            name:`${this.year-1}`,
            textStyle: {
              color: '#fff',
              fontSize:10
            }
          },
          {
            name:`${this.year}`,
            textStyle: {
              color: '#fff',
              fontSize:10
            }
          }
        ]
      },
      grid: {
        top:30,
        left:80,
        bottom:50
      },
      yAxis: [{
        splitLine: {
          show: true,    // 是否显示分隔线。默认数值轴显示，类目轴不显示
          interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
          lineStyle: {
            color: 'rgba(255,255,255,.2)'
          },
          width: 3,    // 分隔线线宽
          type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
        },
        axisLine:{
          show: false,
        },
        axisLabel: {
          show:true,
          interval:0,//代表显示所有x轴标签显示
          textStyle: {
            color: 'rgba(255,255,255,.45)'
          },

        },
      }],
      xAxis: [{
        data: [],
        axisLabel: {
          show:true,
          interval:0,//代表显示所有x轴标签显示
          textStyle: {
            color: 'rgba(255,255,255,.45)'
          },

        },
        axisLine:{
          show: false,
        },
        splitLine: {
          show: false,
        },
      }],
      series: [
        {
          name: `${this.year-1}`,
          type: "bar",
          barWidth: 20,
          data: [],
          color:'#EDDB8B',
          label: {
            show: true,
            position: 'top' // 设置 label 显示的位置
          }
        },
        {
          name: `${this.year}`,
          type: "bar",
          barWidth: 20,
          data: [],
          color:'#02BBFE',
          label: {
            show: true,
            position: 'top' // 设置 label 显示的位置
          },
          itemStyle:{
            textStyle: {
              color: 'rgba(255,255,255,.45)'
            },
          }
        },
      ]
    }})
    setTimeout(()=>{this.report03Option ={
      animation: true,
      color: ["#3398DB"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        },
        formatter:function(list,ticket) {
          let str = ''
          const datalist = list.filter(item=>item.data)
          datalist.forEach(item=>{
            str += `${item.marker}${item.seriesName}:${item.data}<br />`
          })
          return str
        }
      },
      legend: {
        show: true,
        itemHeight: 3,
        bottom:'0%',
        left:'0',
        data:[

        ]
      },
      grid: {
        top:30,
        left:80,
        bottom:50
      },
      yAxis: [{
        type: "category",
        splitLine: {
          show: true,    // 是否显示分隔线。默认数值轴显示，类目轴不显示
          interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
          lineStyle: {
            color: 'rgba(255,255,255,.2)'
          },
          width: 3,    // 分隔线线宽
          type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
        },
        axisLine:{
          show: false,
        },
        axisLabel: {
          show:true,
          interval:0,//代表显示所有x轴标签显示
          textStyle: {
            color: 'rgba(255,255,255,.45)'
          },

        },
      }],
      xAxis: [{
        type: "value",
        data: [],
        axisLabel: {
          show:true,
          interval:0,//代表显示所有x轴标签显示
          textStyle: {
            color: 'rgba(255,255,255,.45)'
          },

        },
        axisLine:{
          show: false,
        },
        splitLine: {
          show: false,
        },
      }],
      series: [
        {
          name: `${this.year-1}`,
          type: "bar",
          barWidth: 15,
          data: [],
          color:'#EDDB8B',
        },
        {
          name: `${this.year}`,
          type: "bar",
          barWidth: 15,
          data: [],
          color:'#02BBFE',
          itemStyle:{
            textStyle: {
              color: 'rgba(255,255,255,.45)'
            },
          }
        },
      ]
    }})
    setTimeout(()=>{this.report04Option ={
      animation: true,
      color: ["#3398DB"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      legend: {
        show: true,
        itemHeight: 3,
        bottom:'0%',
        left:'10%',
        data:[
          {
            name:this.getPeriod(2),
            textStyle: {
              color: '#fff',
              fontSize:10
            }
          },{
            name:this.getPeriod(3),
            textStyle: {
              color: '#fff',
              fontSize:10
            }},{
            name:this.getPeriod(1),
            textStyle: {
              color: '#fff',
              fontSize:10
            }
          }
        ]
      },
      grid: {
        top:30,
        left:80,
        bottom:50
      },
      yAxis: [{
        splitLine: {
          show: true,    // 是否显示分隔线。默认数值轴显示，类目轴不显示
          interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
          lineStyle: {
            color: 'rgba(255,255,255,.2)'
          },
          width: 3,    // 分隔线线宽
          type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
        },
        axisLine:{
          show: false,
        },
        axisLabel: {
          show:true,
          interval:0,//代表显示所有x轴标签显示
          textStyle: {
            color: 'rgba(255,255,255,.45)'
          },

        },
      }],
      xAxis: [{
        data: [],
        axisLabel: {
          show:true,
          interval:0,//代表显示所有x轴标签显示
          textStyle: {
            color: 'rgba(255,255,255,.45)'
          },

        },
        axisLine:{
          show: false,
        },
        splitLine: {
          show: false,
        },
      }],
      series: [
        {
          name: this.getPeriod(2),
          type: "bar",
          barWidth: 15,
          data: [],
          color:'#02BBFE',
          itemStyle:{
            textStyle: {
              color: 'rgba(255,255,255,.45)'
            },
          }
        },
        {
          name: this.getPeriod(3),
          type: "bar",
          barWidth: 20,
          data: [],
          color:'#EDDB8B',
          label: {
            show: true,
            position: 'top' // 设置 label 显示的位置
          }
        },
        {
          name:this.getPeriod(1),
          type: "bar",
          barWidth: 20,
          data: [],
          color:'#7FFFAF',
          label: {
            show: true,
            position: 'top' // 设置 label 显示的位置
          }
        },
      ]
    }})
    window.addEventListener('keydown',(e)=>{
      if(e.code === 'F11'){
        e.preventDefault()
        if (this.status){
          this.unqp()
        }else {
          this.qp()
        }
      }
    })
    this.onGet()
    setInterval(()=>{
      this.onGet()
    },1000*600)
  },
  mounted() {
    document.querySelector('.cockpitMainBox').style.height=`calc(100vh - ${84 / this.getRatio()}px)`
    this.app = document.querySelector('.app-main')
    const domResize = new ResizeObserver(()=>{
      this.setSize()
    })
    const _this = this
    window.addEventListener('resize',debounce(function(){
      document.querySelector('.cockpitMainBox').style.height=`100vh`
      _this.computedSize()
    }))
    domResize.observe(this.app)
    //背景文字坠落
    this.bg = document.querySelector('#bg')
    this.ctx = this.bg.getContext('2d')
    setInterval(()=>{
      this.draw()
    },40)

  },
  methods:{
    onGet(){
      this.getMonthlyReceive()
      this.getYearlyYoyReceive()
      this.getCurReceive()
      this.getMonthlyYoyReceive()
    },
    removeQuery(){
      for (let key in this.query){
        this.query[key] = ''
      }
      this.onGet()
    },
    setQuery(type,val){
      if (val){
        this.query[type] = val.dropDownName
      }else {
        this.query[type] = ''
      }
      if(type === 'monthlyReceive'){
        this.getMonthlyReceive()
      }else if(type === 'yearlyYoyReceive'){
        this.getYearlyYoyReceive()
      }else if(type === 'curReceive'){
        this.getCurReceive()
      }else if(type=== 'monthlyYoyReceive'){
        this.getMonthlyYoyReceive()
      }
    },
    getMonthlyReceive(){
      monthlyReceive({resultType:this.dropDownType,dropDownName:this.query.monthlyReceive}).then(res=>{
        const curDate = new Date()
        const dateList = new Array(new Date(curDate.getFullYear(),curDate.getMonth()+1,0).getDate()).fill(0)
        dateList.forEach((item,index)=>{dateList[index] = index+1})
        this.report01Option.xAxis.data = dateList
        this.report01Option.series = []
        res.data.content.forEach(item=>{
          const data = []
          for (let i =1;i<=this.day;i++){
            data.push((item[`receive${i}`]/10000) >> 0)
          }
          this.report01Option.series.push(
            {
              name:item.name,
              type:'line',
              data:data,
              symbol:"circle",
              symbolSize:0,
            }
          )
        })
        this.report01Option.legend.data = res.data.content.map(item=>{
          return {
            name:item.name,
            textStyle: {
              color: '#fff',
              fontSize:15
            }
          }
        })
      })
    },
    getYearlyYoyReceive(){

      yearlyYoyReceive({resultType:this.dropDownType,dropDownName:this.query.yearlyYoyReceive}).then(res=>{
        const list = res.data.content
        //x轴
        this.report02Option.xAxis[0].data = list.map(item=>item.name)

        if (this.report02Option.xAxis[0].data.length < 15){
          const num = 15 -this.report02Option.xAxis[0].data.length
          for (let i=0;i<num;i++){
            this.report02Option.xAxis[0].data.push('')
          }
        }
        //y轴
        this.report02Option.series[1].data = list.map(item=>(item.curReceive/10000) >> 0)
        //前期
        this.report02Option.series[0].data = list.map(item=>(item.yoyReceive/10000) >> 0)
      })
    },
    getCurReceive(){
      curReceive({resultType:this.dropDownType,dropDownName:this.query.curReceive}).then(res=>{
        const list = res.data.content
        let typeList = [
          {val:'normalAmount',name:'正常期金额',color:'#FBBB97'},
          {val:'overDateAmount1',name:'超账期1-30天金额',color: "#7FFFAF"},
          {val:'overDateAmount2',name:'超账期31-60天金额',color: "#F36DED"},
          {val:'overDateAmount3',name:'超账期61-90天金额',color: "#F78462"},
          {val:'overDateAmount4',name:'超账期91-120天金额',color: "#4755F9"},
          {val:'overDateAmount5',name:'超账期120天以上金额',color: "#42BDFD"},]
        this.report03Option.yAxis[0].data = list.map(item=>item.name)
        this.report03Option.legend.data=typeList.map(item=>{
            return {
              name:item.name,
              textStyle: {
                color: '#fff',
                fontSize:10
              }
            }
          }
        )
        this.report03Option.series = typeList.map(item=>{
          const dataList = []
          for (let i of list){
            dataList.push((i[item.val]/10000) >> 0)
          }
          return {
            name:item.name,
            type: "bar",//柱状图
            stack:"Search Engine",
            color:item.color,
            emphasis: {//折线图的高亮状态。
              focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
            },
            data:dataList
          }
        })


        // this.report02Option.xAxis[0].data = list.map(item=>item.customerName)
        // //y轴
        // this.report02Option.series[0].data = list.map(item=>item.curStock)
        // //前期
        // this.report02Option.series[1].data = list.map(item=>item.yoyStock)
      })
    },
    getMonthlyYoyReceive(){
      monthlyYoyReceive({resultType:this.dropDownType,dropDownName:this.query.monthlyYoyReceive}).then(res=>{
          const list = res.data.content
          //x轴
          this.report04Option.xAxis[0].data = list.map(item=>item.name)
          if (this.report04Option.xAxis[0].data.length < 15){
            const num = 15 -this.report04Option.xAxis[0].data.length
            for (let i=0;i<num;i++){
              this.report04Option.xAxis[0].data.push('')
            }
          }
          //y轴
          //本期
          this.report04Option.series[2].data = list.map(item=>(item.curReceive/10000) >> 0)
          //同期
          this.report04Option.series[0].data = list.map(item=>(item.yoyStock/10000) >> 0)
          //前期
          this.report04Option.series[1].data = list.map(item=>(item.earlyReceive/10000) >> 0)
        }
      )
    },
    getRatio() {
      var ratio = 0
      var screen = window.screen
      var ua = navigator.userAgent.toLowerCase()

      if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio
      } else if (~ua.indexOf('msie')) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
          ratio = screen.deviceXDPI / screen.logicalXDPI
        }
      } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
        ratio = window.outerWidth / window.innerWidth
      }

      if (ratio) {
        ratio = ratio / 1.25
      }
      return ratio
    },
    openDetail(type){
      this.showDetail = true
      this.detailData = this.detailProps[type]
    },
    setCockpitType(type){
      this.currentCockpitType = type
      this.dropDownHeight = 0
      this.onGet()
    },
    draw(){
      this.ctx.fillStyle='rgba(0,0,0,.1)'
      this.ctx.fillRect(0,0,this.bg.width,this.bg.height)
      this.ctx.textBaseline = 'top'
      this.ctx.fillStyle='rgba(0,0,255,.3)'
      const y = (this.bg.height/this.ctxfontSize)>>0
      for(let i=0;i<this.bgConfig.columnsCount;i++){
        this.ctx.fillText(this.getRandomChar(),i*this.ctxfontSize,this.bgConfig.charIndex[i]*this.ctxfontSize)
        if(y < this.bg.height&&Math.random()>0.99){
          this.bgConfig.charIndex[i] = 0
        }else{
          this.bgConfig.charIndex[i]++
        }

      }
    },
    getRandomChar(){
      const str = '123456789qwertyuiopasdfghjklzxcvbnm'
      return str[(Math.random() * str.length)>>0]
    },
    getPeriod(type){
      switch (type){
        case 1:
          return `${this.year}-${this.month}`;
        case 2:
          return `${this.year-1}-${this.month}`;
        case 3:
          if (this.month ===1)return `${this.year-1}-12`
          return `${this.year}-${this.month-1}`;
      }
    },
    setDropDownHeight(){
      this.dropDownHeight = this.dropDownHeight?0:'120%'
    },
    computedSize(){
      Object.keys(this.containSizes).forEach(item=>{
        this.containSizes[item].width = `${document.querySelector(`.${item}`).offsetWidth * this.containSizes[item].widthProportion}px`
        this.containSizes[item].height = `${document.querySelector(`.${item}`).offsetHeight * this.containSizes[item].heightProportion}px`
      })
    },
    setSize:debounce(function(){
      this.computedSize()
      const size1 = (this.app.offsetWidth / 1920).toFixed(2) * 30
      const size2 = (this.app.offsetHeight / 1080).toFixed(2) * 30
      const size = Math.min(size1,size2)
      this.ctxfontSize = (this.bg.width / 60) >> 0
      this.ctx.font=`${this.ctxfontSize}px 微软雅黑`
      this.bgConfig.columnsCount =(this.bg.width / this.ctxfontSize)>> 0
      this.bgConfig.charIndex = new Array(this.bgConfig.columnsCount).fill(0)
      document.getElementsByTagName('body')[0].style.setProperty('--cockpitMainBoxFontSize',`${~~size}px`)
    },100),
    qp(){
      document.getElementsByTagName('body')[0].style.setProperty('--defaultContainerWidth','0')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultAppMainPt','0')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultAppMainZIndex','10')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultSideBarWidth','0')
      if(document.documentElement.RequestFullScreen){
        document.documentElement.RequestFullScreen();
      }
      //兼容火狐
      if(document.documentElement.mozRequestFullScreen){
        document.documentElement.mozRequestFullScreen();
      }
      //兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
      if(document.documentElement.webkitRequestFullScreen){
        document.documentElement.webkitRequestFullScreen();
      }
      //兼容IE,只能写msRequestFullscreen
      if(document.documentElement.msRequestFullscreen){
        document.documentElement.msRequestFullscreen();
      }
      this.status = 1
      document.querySelector('.fixed-header').style.display = 'none'
      document.querySelector('.cockpitMainBox').style.height=`${window.screen.height / this.getRatio()}px`
      document.querySelector('#el-main-footer').style.display = 'none'
    },
    unqp(){
      document.getElementsByTagName('body')[0].style.setProperty('--defaultContainerWidth','54px')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultAppMainPt','84px')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultAppMainZIndex','0')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultSideBarWidth','200px')
      if(document.exitFullScreen){
        document.exitFullscreen()
      }
      //兼容火狐
      if(document.mozCancelFullScreen){
        document.mozCancelFullScreen()
      }
      //兼容谷歌等
      if(document.webkitExitFullscreen){
        document.webkitExitFullscreen()
      }
      //兼容IE
      if(document.msExitFullscreen){
        document.msExitFullscreen()
      }
      this.status = 0
      document.querySelector('.cockpitMainBox').style.height=`${window.screen.height / this.getRatio()}px`
      document.querySelector('#el-main-footer').style.display = 'block'
      document.querySelector('.fixed-header').style.display = 'block'
      document.querySelector('.sidebar-container').style.display = 'block'
    },

  }
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'SourceHanSansCN-Medium';
  src: local('SourceHanSansCN-Medium'), url('../../../assets/font_icon/SourceHanSansCN-Medium.otf') format('opentype');
}
.cockpitMainBox{
  font-family: SourceHanSansCN-Medium;
  //background-image: url("../../../assets/images/cockpitBg.png");
  z-index: 2;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  min-width: 800px;
  font-size: var(--cockpitMainBoxFontSize,30px);
  transition: font-size linear 0.1s;
  position: relative;
  .triangle{
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: white transparent transparent ;
    width: 20px;
    height: 0;
    cursor: pointer;
  }
  .title{
    background-image: url("../../../assets/images/cockpit/top_bg.png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 10%;
    opacity:1;
    position: relative;
    .dropDownType{
      position: absolute;
      right: 8%;
      bottom: 0;
      width: 15%;
      &:before{
        content: '下拉类型选择';
        display: block;
        color:#C0C4CC;
        width: 15%;
        position: absolute;
        left: -15%;
        font-size: .3em;
      }
    }
    .titleText{
      width: 45%;
      height: 100%;
      margin: auto;
      bottom: 0;
      font-size:1.2em;
      color: white;
      justify-content: center;
      letter-spacing: 2px;
    }
    .dropDown{
      position: absolute;
      overflow: hidden;
      width: 20%;
      background: rgba(0,0,255,.3);
      border: #0E5FFF 3px solid;
      top: 2em;
      z-index: 999;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      transition: height 200ms linear;
      .switch{
        flex:1;
        &:hover{
          cursor: pointer;
          background: rgba(0,0,255,.8);
        }
      }
    }
  }
  .report01{
    width: 98%;
    height: 45%;
    top: 11%;
    left: 1%;
  }
  .report02{
    width: 32%;
    height: 40%;
    top: 57%;
    left: 1%;
  }
  .report03{
    width: 32%;
    height: 40%;
    top: 57%;
    left: 34%;
  }
  .report04{
    width: 32%;
    height: 40%;
    top: 57%;
    left: 67%;
  }
}
.tableBox{
  background-color: rgba(0,0,255,.18);
  background-size: 100%;
  position: absolute;
  padding: 10px 10px 0 10px;

  .psCustomer{
    &:before{
      content: '配送中心' !important;
      font-size: 0.5em;
      display: block;
      width: 50%;
    }
  }
  .scroll
  {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    &::-webkit-scrollbar {
      height: .8em;
      background-color: rgba(0,0,0,0);
    }
    &::-webkit-scrollbar-thumb{
      &:hover{
        background-color: rgba(0,0,255,.1);
      }
    }
  }
  .reportTitle{
    font-size: 0.6em;
    color: #FEFEFE;
  }
  .type{
    width: 30%;
    position: absolute;
    right: 5%;
    color: white;
    &:before{
      content: '类型筛选';
      font-size: 0.7em;
      justify-content: right;
      display: flex;
      width: 50%;
    }
  }
  .pCustomer{
    &:before{
      content: '商贸公司' !important;
      font-size: 0.7em;
      display: block;
      width: 50%;
    }
  }
  .xial{
    width: 45px;
    height: 10px;
    background-image: url("../../../assets/images/cockpit/xial.png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .leftBor{
    height: 100%;
    position: absolute;
    left: 0;
    margin-top: -10px;
    &:before{
      @extend %subscript;
      border-left: #64FAFC 3px solid;
      border-top: #64FAFC 3px solid;
      left: 0;
      top: 0;
      width: 5px;
      height: 5px;
    }
    &:after{
      @extend %subscript;
      border-left: #64FAFC 3px solid;
      border-bottom: #64FAFC 3px solid;
      left: 0;
      bottom: 0;
      width: 5px;
      height: 5px;
    }
  }
  .rightBor{
    height: 100%;
    position: absolute;
    right: 5px;
    margin-top: -10px;
    &:before{
      @extend %subscript;
      border-right: #64FAFC 3px solid;
      border-top: #64FAFC 3px solid;
      left: 0;
      top: 0;
      width: 5px;
      height: 5px;
    }
    &:after{
      @extend %subscript;
      border-right: #64FAFC 3px solid;
      border-bottom: #64FAFC 3px solid;
      left: 0;
      bottom: 0;
      width: 5px;
      height: 5px;
    }
  }
  .contentReport{
    border: rgba(0,0,255,0.1) 2px solid;
    position: relative;
    background: rgba(255,255,255,.05);
  }
  .containerLeftBor{
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    &:before{
      @extend %subscript;
      border-left: rgba(0,0,255,.3) 2px solid;
      border-top: rgba(0,0,255,.3) 2px solid;
      left: 0;
      top: 0;
      height: 5px;
    }
    &:after{
      @extend %subscript;
      border-left: rgba(0,0,255,.3) 2px solid;
      border-bottom: rgba(0,0,255,.3) 2px solid;
      left: 0;
      bottom: 0;
      height: 5px;
    }
  }
  .containerRightBor{
    height: 100%;
    position: absolute;
    right: 5px;
    top: 0;
    &:before{
      @extend %subscript;
      border-right: rgba(0,0,255,.3) 2px solid;
      border-top: rgba(0,0,255,.3) 2px solid;
      left: 0;
      top: 0;
      height: 5px;
    }
    &:after{
      @extend %subscript;
      border-right: rgba(0,0,255,.3) 2px solid;
      border-bottom: rgba(0,0,255,.3) 2px solid;
      left: 0;
      bottom: 0;
      height: 5px;
    }
  }
}
.thousand{
  &:after{
    content: ',';
    font-size: 0.3em;
    display: block;
    position: absolute;
    right: 1px;
    bottom: 0;
  }
}
%subscript{
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
}
#bg{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.more{
  position: absolute;
  right: 10px;
  font-size: 0.5em;
  background: rgba(0,0,255,.2);
  max-height: 4%;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  &:after{
    content:'更多';
    color:white;
    font-weight: 400;
  }
}

</style>
